<template>
	<view class="my_app" v-wechat-title="this.pageTitle">
		<view class="box_1">
			<view class="box_info">
				<view class="box_top" :class="top_loading === true ? 'wait' : ''">
					<view class="u-skeleton">
						<view class="avatar_box">
							<image :src="logo" alt="Logo"></image>
						</view>
						<view class="name">{{ companyname }}</view>
						<view class="point">
							我的{{ points_byname }}：
							<text>{{ points }}</text>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<view class="btn_group clearfix">
							<u-button class="btn0"
								:custom-style="{ color: '#fa7445', fontSize: '30rpx', padding: '10rpx 20rpx' }" plain
								shape="circle" size="small" @click="handleClick('/service/company/integral')">
								购买{{ points_byname }}
							</u-button>
							<u-button class="btn1"
								:custom-style="{ color: '#1787fb', fontSize: '30rpx', padding: '10rpx 20rpx' }" plain
								shape="circle" size="small" @click="handleClick('/company/Service/BudgetLog')">
								收支明细
							</u-button>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<view class="btn_group clearfix">
							<u-button class="btn1"
								:custom-style="{ color: '#1787fb', fontSize: '30rpx', padding: '10rpx 20rpx' }" plain
								shape="circle" size="small" @click="handleClick('/company/Service/BudgetLog')">
								收支明细
							</u-button>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						<view class="btn_group clearfix">
							<!-- <button class="btn0 alipay-btn0" size="small"
								@click="handleClick('/company/Service/BuyPoints')">
								购买{{ points_byname }}
							</button> -->
							<button class="btn1 alipay-btn1" size="small"
								@click="handleClick('/company/Service/BudgetLog')">
								收支明细
							</button>
						</view>
						<!-- #endif -->
						<view class="sign_box" v-if="isSignIn == 0" @click="handlerSignin">每日签到</view>
						<view class="sign_box sign_box_also" v-else>已签到</view>
					</view>
					<u-skeleton avatar :row="4" :loading="top_loading"></u-skeleton>
				</view>
				<view class="box_bottom" @click="handleClick('/commonViews/service/OrderList')">
					服务订单
					<view class="right_txt">查看全部订单</view>
				</view>
			</view>
		</view>
		<view class="self_box_head">我的任务</view>
		<view class="box_3">
			<view class="item" v-for="(item, index) in task" :key="index">
				<view class="ico" :class="item.alias"></view>
				<view class="tx1">{{ item.name }}</view>
				<view class="tx2">{{ points_byname }}：{{ item.points }}</view>
				<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
				<u-button v-if="item.is_done == 0" class="btn" plain type="primary"
					:custom-style="{ padding: '0rpx 30rpx', height: '60rpx', lineHeight: '60rpx' }" shape="circle"
					@click="handlerJump(item)">
					去完成
				</u-button>
				<view class="down" v-else></view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<button v-if="item.is_done == 0" class="btn alipay-btn-complete" type="primary"
					@click="handlerJump(item)">
					去完成
				</button>
				<view class="down" v-else></view>
				<!-- #endif -->
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
		<u-modal v-model="showWeixinQrcode" title="认证" confirm-text="保存" @confirm="handleWechatQrcodeConserve">
			<view class="dialog_wx_qr">
				<view class="tip orange">截屏保存二维码图片，关注公众号</view>
				<view class="qr_img">
					<image :src="wechat_qrcode"></image>
				</view>
				<view class="tip_text">使用“扫一扫”打开图片，识别关注公众号完成绑定操作。绑定后即可随时随地接收最新消息通知。</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
		<CustomerModal ref="CustomerModal"></CustomerModal>
	</view>
</template>

<script>
	import http from '@/utils/http';
	import api from '@/api';
	import {
		mapState
	} from 'vuex';
	import CustomerModal from '@/components/CustomerModal.vue';
	import {
		getParam
	} from '../../utils/index.js'
	export default {
		name: 'Points',
		components: {
			CustomerModal
		},
		data() {
			return {
				pageTitle: '',
				points_byname: '',
				top_loading: true,
				points: 0,
				logo: '',
				companyname: '',
				task: [],
				showWeixinQrcode: false,
				isSignIn: 0, //是否签到
				signInPoints: 0 // 每日签到积分数
			};
		},
		computed: {
			...mapState({
				wechat_qrcode: state => state.config.wechat_qrcode
			})
		},
		created() {
			console.log('getParam', getParam())
			this.points_byname = this.$store.state.config.points_byname;
			// this.pageTitle = this.$Route.meta.title;
			// this.pageTitle.replace('积分', this.points_byname);
			this.fetchData();
		},
		methods: {
			handleClick(path) {
				uni.navigateTo({
					url: path
				})
			},
			handleTip() {
				this.$nextTick(() => {
					this.$refs.CustomerModal.getCustomer();
				});
			},
			fetchData() {
				http.get(api.member_points, {})
					.then(res => {
						console.log(res, 'res');
						if (res.data.code == 200) {
							const {
								points,
								logo,
								companyname,
								task
							} = {
								...res.data.data
							};
							this.points = points;
							this.logo = logo;
							this.companyname = companyname;
							this.task = task.filter(res => {
								return res.alias != 'bind_qq' && res.alias != 'bind_weixin';
							});
							this.task.forEach(item => {
								if (item.alias == 'sign_in') {
									this.isSignIn = item.is_done;
									this.signInPoints = item.points;
								}
							});
						}
						this.top_loading = false;
					})
					.catch(() => {});
			},
			handlerJump(item) {
				console.log(item.alias)
				switch (item.alias) {
					case 'bind_weixin':
						this.showWeixinQrcode = true;
						break;
					case 'bind_qq':
					case 'bind_sina':
						uni.navigateTo({
							url: '/company/AccountManage/Account'
						})
						break;
					case 'upload_logo':
						uni.navigateTo({
							url: '/company/BasicInfo'
						})
						break;
					case 'auth':
						uni.navigateTo({
							url: '/company/AccountManage/Auth'
						})
						break;
					case 'upload_img':
						uni.navigateTo({
							url: '/company/CompanyManagement'
						})
						break;
					case 'handle_resume':
						uni.navigateTo({
							url: '/company/CompanyManagementIndex?navIndex=' + 0
						})
						break;
					case 'sign_in':
						this.handlerSignin();
						break;
					default:
						break;
				}
				this.fetchData();
			},
			handlerSignin() {
				http.post(api.member_signin, {})
					.then(res => {
						// if(res.data.data.code == 500){
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'success'
						});
						this.task.forEach(element => {
							if (element.alias === 'sign_in') {
								element.is_done = 1;
							}
						});
						// }
					})
					.catch(() => {});
			},
			/**
			 * 弹窗二维码保存
			 * */
			handleWechatQrcodeConserve() {
				var _this = this;
				uni.downloadFile({
					url: _this.wechat_qrcode, //仅为示例，并非真实的资源
					success: res => {
						if (res.statusCode === 200) {
							let file = res.tempFilePath;
							uni.saveImageToPhotosAlbum({
								filePath: file,
								success: function() {
									_this.$refs.uToast.show({
										title: '保存成功'
									});
								}
							});
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.box_3 {
		.item {
			.ico {
				&.reg {
					background-image: url($ImgUrl+'task_ico_hfxx.png');
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				&.handle_resume {
					background-image: url($ImgUrl+'task_ico_cljl.png');
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				&.upload_img {
					background-image: url($ImgUrl+'task_ico_qyfc.png');
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				&.auth {
					background-image: url($ImgUrl+'task_ico_yyzz.png');
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				&.upload_logo {
					background-image: url($ImgUrl+'task_ico_avatar.png');
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				&.bind_sina {
					background-image: url($ImgUrl+'task_ico_bdwb.png');
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				&.bind_qq {
					background-image: url($ImgUrl+'task_ico_bdqq.png');
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				&.bind_weixin {
					background-image: url($ImgUrl+'task_ico_bdwx.png');
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				&.sign_in {
					background-image: url($ImgUrl+'task_ico_sign.png');
					background-repeat: no-repeat;
					background-position: 0 0;
					background-size: 66rpx;
				}

				position: absolute;
				left: 24rpx;
				top: 50%;
				transform: translate(0, -50%);
				width: 66rpx;
				height: 66rpx;
			}

			.down {
				position: absolute;
				right: 36rpx;
				top: 50%;
				transform: translate(0, -50%);
				width: 97rpx;
				height: 80rpx;
				background-image: url($ImgUrl+'task_ico_down.png');
				background-repeat: no-repeat;
				background-position: 0 0;
				background-size: 97rpx 80rpx;
			}

			.btn {
				position: absolute;
				right: 24rpx;
				top: 50%;
				transform: translate(0, -50%);

				&.alipay-btn-complete {
					padding: 0rpx 20rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					border-radius: 50rpx;
					color: #2979ff;
					border-color: #a0cfff;
					background-color: #ecf5ff;
				}
			}

			.tx2 {
				font-size: 24rpx;
				color: #666666;
				width: 400rpx;
				overflow: hidden;
				white-space: nowrap;
				padding: 6rpx 0 20rpx;
				text-overflow: ellipsis;
			}

			.tx1 {
				font-size: 30rpx;
				color: #333333;
				font-weight: bold;
				width: 400rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-top: 22rpx;
			}

			position: relative;
			border: 2rpx solid #f8f8f8;
			border-radius: 10rpx;
			padding-left: 124rpx;

			&:not(:last-child) {
				margin-bottom: 26rpx;
			}
		}

		margin-bottom: 20rpx;
		padding: 0 30rpx;
	}

	.self_box_head {
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
		padding: 24rpx 30rpx;
	}

	.box_1 {
		.box_info {
			.box_bottom {
				.right_txt {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translate(0, -50%);
					padding-right: 34rpx;
					font-size: 24rpx;
					color: #c9c9c9;
					background: url(../static/img/form_choose_arrow.png);
					background-position: right 4rpx;
					background-repeat: no-repeat;
					background-size: 28rpx;
				}

				font-size: 28rpx;
				color: #333333;
				padding: 30rpx 0 30rpx 58rpx;
				border-top: 2rpx solid #f3f3f3;
				background-image: url($ImgUrl+'serve_index_tb_bg.png');
				background-repeat: no-repeat;
				background-position: 26rpx center;
				background-size: 22rpx 26rpx;
				position: relative;
			}

			.box_top {
				&.wait {
					padding: 20rpx 30rpx 20rpx 30rpx;
				}

				.sign_box {
					&.sign_box_also {
						background: #bbbbbb;
					}

					&::after {
						content: ' ';
						position: absolute;
						right: 0;
						bottom: -11rpx;
						width: 17rpx;
						height: 11rpx;
						background-image: url($ImgUrl+'serve_index_sign_bg.png');
						background-position: 0 0;
						background-repeat: no-repeat;
						z-index: 2;
						background-size: 17rpx 11rpx;
					}

					position: absolute;
					right: -17rpx;
					top: 72rpx;
					font-size: 24rpx;
					color: #ffffff;
					padding: 14rpx 24rpx 14rpx 30rpx;
					background: linear-gradient(to right, #ffa140, #fa7445);
					border-radius: 60rpx 0 0 60rpx;
					z-index: 3;
				}

				.avatar_box {
					position: absolute;
					left: 40rpx;
					top: 46rpx;
					overflow: hidden;
					width: 110rpx;
					height: 110rpx;
					box-shadow: 0 0 10rpx #c2c2c2;
					border-radius: 20rpx;

					image {
						width: 110rpx;
						height: 110rpx;
						border-radius: 20rpx;
					}
				}

				.btn_group {
					/deep/ .btn0 {
						margin-right: 20rpx;
						vertical-align: top;
						float: left;
					}

					/deep/ .btn1 {
						margin-right: 40rpx;
						vertical-align: top;
						float: left;
					}

					.alipay-btn0 {
						margin-right: 20rpx;
						vertical-align: top;
						float: left;
						color: #fa7445;
						border-color: #fa7445;
						border-radius: 52rpx;
						font-size: 28rpx;
						padding: 0 20rpx;
						height: 50rpx;
						line-height: 50rpx;
					}

					.alipay-btn1 {
						margin-right: 20rpx;
						vertical-align: top;
						float: left;
						color: #1787fb;
						border-color: #1787fb;
						border-radius: 52rpx;
						padding: 0 20rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 28rpx;
					}

					padding-bottom: 26rpx;
				}

				.point {
					text {
						color: #fa7445;
					}

					padding-bottom: 26px;
					font-size: 28rpx;
					color: #666666;
				}

				.name {
					padding: 44rpx 176rpx 16rpx 0;
					font-size: 36rpx;
					color: #333333;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				width: 100%;
				padding-left: 180rpx;
			}

			position: relative;
			width: 680rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			margin: 0 auto;
			box-shadow: 0 2rpx 10rpx #c2c2c2;
		}

		position: relative;
		width: 100%;
		margin-bottom: 20rpx;
		padding-top: 70rpx;
	}

	.my_app {
		background-image: url($ImgUrl+'serve_index_top_bg.png');
		background-repeat: no-repeat;
		background-position: center 0;
		background-size: 750rpx 382rpx;
	}
</style>